<template>
  <view class="settle-box">
      <label class="radio" @click="ifFullChecked">
        <radio :checked ="ifChecked" /><text>全选</text>
      </label>
      <view class="price-all">
        合计:￥{{checkedGoodsAmount}}
      </view>
      <button @click="settlement" type="default" class="btn-box">结算({{checkdCount}})</button>
  </view>
</template>

<script>
    import {mapGetters,mapMutations,mapState} from 'vuex'
  export default {
    name:"my-settle",
    data() {
      return {
        seconds: 3,
        timer: null
      };
    },
    computed: {
      ...mapState('my_user', ['token']),
      ...mapState('my_cart',['cart']),
      ...mapGetters('my_user',['addr']),
      ...mapGetters('my_cart',['checkdCount','total','checkedGoodsAmount']),
      ifChecked(){
        return this.checkdCount === this.total
      }
    },
    methods: {
      ...mapMutations('my_cart',['updateAllGoodsState']),
      ...mapMutations('my_user',['updataRedirectInfo']),
      ifFullChecked () {
        this.updateAllGoodsState(!this.ifChecked)
      },
      settlement(){
        if (!this.checkedGoodsAmount) return uni.$showMsg('请选择要结算的商品')
        if (!this.addr) return uni.$showMsg("请填写地址")
        if (!this.token) return this.delayNavigate()
        this.payOrder();
      },
      async payOrder() {
          // 接口参数
        const orderInfo = {
          // order_price: this.checkedGoodsAmount,
          order_price: 0.01,
          consignee_addr: this.addr,
          goods: this.cart.filter(x => x.goods_state).map(x => ({goods_id:x.goods_id,goods_number:x.goods_count,goods_price:x.goods_price}))
        }
        // 发起请求创建订单
        const {res} = await uni.$http.post('/api/public/v1/my/orders/create',orderInfo)
        if(res.meta.status !== 200 ) return uni.$showMsg('订单创建失败') 
        // 给订单编号赋值
        const orderNumber = res.message.order_number
      // 订单预支付
       const {res2} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder',{order_number:orderNumber})
       if(res2.meta.status !== 200) return uni.$showMsg('预支付失败')
       const payInfo = res2.message.pay
       
       // 发起微信支付
       const [err,succ] = await uni.requestPayment(payInfo)
          // 未完成支付
      if (err) return uni.$showMsg('订单未支付')
      // 完成了支付，查询结果
      const {res3} = await uni.$http.post('/api/public/v1/my/orders/chkOrder',{ order_number: orderNumber })
      if (res3.meta.status !== 200) return uni.$showMsg('检测到订单未成功支付,稍后重试')
      uni.showToast({
        title: '支付成功',
        icon: 'success'
      })
      },
      delayNavigate(){
        this.seconds = 3
        this.showTips(this.seconds) 
        // 创建定时器
        this.timer = tsetInterval(() => {
          this.seconds --
          this.showTips(this.seconds)
        },1000)
        if( this.seconds <= 0) {
          clearInterval(this.timer)
        }
        uni.switchTab({
          url: '/pages/my/my',
          success() {
            this.updataRedirectInfo({
              openType: 'switchTab',
              from: 'pages/cart/cart'
            })
          }
        })
        return

      },
      showTips(n) {
        uni.showToast({
          icon: 'none',
          title: '请登录后在结算!' + n + '秒后自动跳转登录页面',
          mask: true,
          duration: 1500
        })
      }
    }
    
  }
</script>

<style lang="scss">
  .settle-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    // background-color: #2979FF;
    border-top: 1px solid #000000;
    width: 100%;
    height: 100rpx;
    .radio {
      display: flex;
      align-items: center;
      margin: 0 15px;
    }
    .btn-box {
      height: 100%;
      margin-right: 0;
      width: 250rpx;
      background-color: #a30000;
      color: #ffffff;
    }
  }
  
</style>
